<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>经典贪吃蛇</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div style="display: flex; height: 98vh; width: 100%;">
        <!-- 个人游戏历史记录 -->
        <div id="historyPanel">
            <h3>
                🐍<span id="usernameDisplay" style="cursor: pointer; text-decoration: underline; color: blue;">玩家</span> 的游戏历史
            </h3>

            <!-- 用户名输入框（默认隐藏） -->
            <input type="text" id="usernameInput" placeholder="请输入您的用户名" style="width: 100%; padding: 5px; display: none; margin-bottom: 10px;">

            <!-- 按钮容器，横向排列 -->
            <div style="display: flex; justify-content: space-between; gap: 5px; margin-bottom: 10px;">
                <button id="sortBtn" style="flex: 1; padding: 5px; cursor: pointer;">score⇅</button>
                <button id="sortByTimeBtn" style="flex: 1; padding: 5px; cursor: pointer;">time⇅</button>
                <button id="clearHistoryBtn" style="flex: 1; padding: 5px; cursor: pointer; background: #ff4d4d; color: white;">🗑</button>
            </div>

            <ul id="historyList" style="list-style: none; padding: 0;"></ul>
        </div>

        <!-- 右侧游戏区域 -->
        <div style="flex-grow: 1; display: flex; flex-direction: column; align-items: center; padding: 20px;">
            <h1>🐍 经典贪吃蛇</h1>
            <canvas id="gameCanvas" width="600" height="600"></canvas>
            <div id="score">得分：0</div>
            <div id="instructions">使用方向键控制移动 | 吃到红色食物得分</div>

            <div id="difficulty">
                <label for="difficultyRange">选择难度（1-10）：</label>
                <input type="range" id="difficultyRange" min="1" max="10" value="5">
                <span id="difficultyValue">5</span>
            </div>

            <button id="startBtn">开始游戏</button>
        </div>
        <!-- 所有玩家的记录列表 -->
        <div id="allPlayersPanel">
            <h3>所有玩家的记录</h3>
            <table id="allPlayersTable">
                <thead>
                    <tr>
                        <th>玩家</th>
                        <th>得分</th>
                        <th>难度</th>
                        <th>时间</th>
                    </tr>
                </thead>
                <tbody id="allPlayersList"></tbody>
            </table>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>